<template>
  <div id="access" style="background-image: url('/static/background/background.png'); min-height: 89vh; position: relative;">
    <div id="tableContainer" style="position: absolute; top: 20px; left: 50px; right: 50px; display: flex;">
      <div class="left-container">
        <div class="center-text">数据权系图谱</div>
        <div class="inner-container">
          <div class="title">数据所有权</div>
          <div class="inner-inner-container">
            <div class="title">数据资源持有权</div>
            <div class="icons-container">
              <div class="icon" @click="selectIcon('知情同意权', require('./css/zhiqingtongyi.svg'), '主体在采集或处理数据前均须先告知数据主体并征得数据主体同意，告知和同意的内容包括采集数据的目的、用途、数据处理方式、程度等及其后续的变化')">
                <img :src="require('./css/zhiqingtongyi.svg')" alt="图标1">
                <div class="icon-text">知情同意权</div>
              </div>
              <div class="icon" @click="selectIcon('被遗忘权', require('./css/shixiao.svg'), '数据主体有权要求数据控制者或管理者及时删除其数据，并通知相关第三方停止利用和传播')">
                <img :src="require('./css/shixiao.svg')" alt="图标2">
                <div class="icon-text">被遗忘权</div>
              </div>
              <div class="icon" @click="selectIcon('修改权', require('./css/xiugai.svg'), '数据主体享有或授权他人修改其数据的权利。换言之，数据主体有权禁止他人未经其授权而擅自修改其数据')">
                <img :src="require('./css/xiugai.svg')" alt="图标3">
                <div class="icon-text">修改权</div>
              </div>
              <div class="icon" @click="selectIcon('删除权', require('./css/shanchu.svg'), '有权请求删除不再需要或不准确的数据')">
                <img :src="require('./css/shanchu.svg')" alt="图标4">
                <div class="icon-text">删除权</div>
              </div>
              <div class="icon" @click="selectIcon('求偿权', require('./css/qiuchang.svg'), '当权利、资源等遭受侵害、损失的时候，具有要求赔偿的权利')">
                <img :src="require('./css/qiuchang.svg')" alt="图标5">
                <div class="icon-text">求偿权</div>
              </div>
              <div class="icon" @click="selectIcon('出售权', require('./css/chushou.svg'), '有权将数据作为商品出售')">
                <img :src="require('./css/chushou.svg')" alt="图标6">
                <div class="icon-text">出售权</div>
              </div>
              <div class="icon" @click="selectIcon('隐私权', require('./css/yinsi.svg'), '有权决定个人数据的公开程度和保护方式')">
                <img :src="require('./css/yinsi.svg')" alt="图标7">
                <div class="icon-text">隐私权</div>
              </div>
              <div class="icon" @click="selectIcon('保护权', require('./css/baohu.svg'), '有权对数据进行加密和其他安全保护措施')">
                <img :src="require('./css/baohu.svg')" alt="图标8">
                <div class="icon-text">保护权</div>
              </div>
            </div>
            <div class="icons-container">
              <div class="icon" @click="selectIcon('匿名化权', require('./css/niming.svg'), '有权将个人身份信息从数据中移除或匿名化')">
                <img :src="require('./css/niming.svg')" alt="图标9">
                <div class="icon-text">匿名化权</div>
              </div>
              <div class="icon" @click="selectIcon('使用限制权', require('./css/xianzhi.svg'), '有权限制他人对数据的使用方式和范围')">
                <img :src="require('./css/xianzhi.svg')" alt="图标10">
                <div class="icon-text">使用限制权</div>
              </div>
              <div class="icon" @click="selectIcon('透明度权', require('./css/toumingdu.svg'), '有权了解数据如何被收集、存储和使用')">
                <img :src="require('./css/toumingdu.svg')" alt="图标11">
                <div class="icon-text">透明度权</div>
              </div>
              <div class="icon" @click="selectIcon('溯源权', require('./css/suyuan.svg'), '有权追踪数据的来源和变动历史')">
                <img :src="require('./css/suyuan.svg')" alt="图标12">
                <div class="icon-text">溯源权</div>
              </div>
              <div class="icon" @click="selectIcon('授权管理权', require('./css/shouquan.svg'), '有权管理谁可以访问和使用数据')">
                <img :src="require('./css/shouquan.svg')" alt="图标13">
                <div class="icon-text">授权管理权</div>
              </div>
              <div class="icon" @click="selectIcon('监管治理权', require('./css/jianguan.svg'), '有权对数据使用进行监管和治理')">
                <img :src="require('./css/jianguan.svg')" alt="图标14">
                <div class="icon-text">监管治理权</div>
              </div>
              <div class="icon" @click="selectIcon('使用通知权', require('./css/tongzhi.svg'), '有权在数据被使用时接收通知')">
                <img :src="require('./css/tongzhi.svg')" alt="图标15">
                <div class="icon-text">使用通知权</div>
              </div>
              <div class="icon" @click="selectIcon('纠正权', require('./css/jiuzheng.svg'), '有权更正错误或不准确的数据')">
                <img :src="require('./css/jiuzheng.svg')" alt="图标16">
                <div class="icon-text">纠正权</div>
              </div>
            </div>
            <div class="bottom-container">
              <div class="title">数据产品经营权</div>
              <div class="icons-container-product">
                <div class="icon" style="width: 31%;" @click="selectIcon('收益权', require('./css/shouyi.svg'), '通过其数据产品获取经济利益的权利')">
                  <img :src="require('./css/shouyi.svg')" alt="图标">
                  <div class="icon-text">收益权</div>
                </div>
              </div>
              <div class="right-container" style="width: 83%;">
                <div class="title">数据加工使用权</div>
                <div class="icons-container" style="margin-top: 40px;height: 36%">
                  <div class="icon" style="width: 8%;" @click="selectIcon('访问权', require('./css/fangwen.svg'), '有权访问和查看数据')">
                    <img :src="require('./css/fangwen.svg')" alt="图标">
                    <div class="icon-text">访问权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('分享权', require('./css/fenxiang.svg'), '有权将数据分享给第三方或公众')">
                    <img :src="require('./css/fenxiang.svg')" alt="图标">
                    <div class="icon-text">分享权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('保存权', require('./css/baocun.svg'), '有权保留数据一段时间以备后续使用')">
                    <img :src="require('./css/baocun.svg')" alt="图标">
                    <div class="icon-text">保存权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('迁移权', require('./css/qianyi.svg'), '有权将数据从一个平台迁移到另一个平台')">
                    <img :src="require('./css/qianyi.svg')" alt="图标">
                    <div class="icon-text">迁移权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('整合权', require('./css/zhenghe.svg'), '有权将不同来源的数据整合起来使用')">
                    <img :src="require('./css/zhenghe.svg')" alt="图标">
                    <div class="icon-text">整合权</div>
                  </div>
                </div>
                <div class="icons-container" style="margin-top: 15px; height: 38%">
                  <div class="icon" style="width: 8%;" @click="selectIcon('分析权', require('./css/fenxi.svg'), '有权对数据进行分析和推理')">
                    <img :src="require('./css/fenxi.svg')" alt="图标">
                    <div class="icon-text">分析权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('格式化权', require('./css/geshihua.svg'), '有权选择和改变数据的存储和呈现格式')">
                    <img :src="require('./css/geshihua.svg')" alt="图标">
                    <div class="icon-text">格式化权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('备份权', require('./css/beifen.svg'), '有权对数据进行定期备份以防丢失')">
                    <img :src="require('./css/beifen.svg')" alt="图标">
                    <div class="icon-text">备份权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('加注权', require('./css/jiazhu.svg'), '有权对数据进行注释或添加元数据')">
                    <img :src="require('./css/jiazhu.svg')" alt="图标">
                    <div class="icon-text">加注权</div>
                  </div>
                  <div class="icon" style="width: 8%;" @click="selectIcon('复制权', require('./css/fuzhi.svg'), '有权复制数据以用于备份、分析或其他用途')">
                    <img :src="require('./css/fuzhi.svg')" alt="图标">
                    <div class="icon-text">复制权</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-container" style="height: auto;padding-bottom: 6%;">
        <div class="center-text">权利解释</div>
        <!-- 右边的内容 -->
        <div class="icon-details" v-show="selectedIcon.src!==''">
          <img :src="selectedIcon.src" alt="图标">
          <div class="icon-name">{{ selectedIcon.name }}</div>
          <div class="icon-description">{{ selectedIcon.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedIcon: {
        name: '',
        src: '',
        description: ''
      }
    };
  },
  methods: {
    selectIcon(name, src, description) {
      this.selectedIcon = { name, src, description };
    }
  }
};
</script>

<style lang="scss">
#access {
  display: flex;
  justify-content: center;
  align-items: center;

  .left-container {
    width: 66.66%;
    background-color: #bdd8d9;
    border: 1px solid black;
    border-radius: 30px; /* 增大圆角 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 24px;
    text-align: center;
  }

  .center-text {
    position: absolute;
    top: 10px;
    font-size: 24px;
    color: black;
    font-weight: bold;
  }

  .inner-container {
    width: 100%;
    height: 33%;
    background-color: #dae2f3;
    border: 1px solid black;
    border-radius: 30px; /* 增大圆角 */
    position: relative;
    color: black;
    font-size: 18px;
    text-align: center;
    margin: auto;
    margin-top: 8%;
  }

  .inner-inner-container {
    width: 100%;
    background-color: #fbe5d5;
    border: 1px solid black;
    border-radius: 30px; /* 增大圆角 */
    position: relative;
    color: black;
    font-size: 18px;
    text-align: center;
    margin: auto;
    margin-top: 45px;
  }

  .bottom-container {
    width: 100%;
    background-color: #fff2cc;
    border: 1px solid black;
    border-radius: 30px; /* 增大圆角 */
    position: relative;
    color: black;
    font-size: 18px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-top: 55px;
  }

  .right-container {
    width: 33.33%;
    background-color: lightgray;
    border: 1px solid black;
    border-radius: 30px; /* 增大圆角 */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    height: 60%;
    margin-top: 8%; /* 调整间距 */
  }

  .icons-container-product {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;
    margin-top: 6%; /* 调整间距 */
  }

  .icon {
    width: 6%; /* 缩小图标 */
    text-align: center;
    white-space: nowrap; /* 防��文字换行 */
    cursor: pointer; /* 鼠标悬浮时显示小手指针 */
    transition: transform 0.3s; /* 添加过渡效果 */

    &:hover img {
      transform: scale(1.2); /* 鼠标悬浮时图片放大 */
    }

    &:hover .icon-text {
      transform: scale(1.2); /* 鼠标悬浮时文字放大 */
    }
  }

  .icon img {
    width: 100%; /* 确保图标图片适应容器 */
  }

  .title {
    position: absolute;
    top: 10px;
    left: 30px;
    font-size: 16px;
    color: #c00000;
    font-weight: bold;
  }

  .icon-details {
    text-align: center;
    margin-top: 20px;
  }

  .icon-details img {
    width: 50px;
    height: 50px;
  }

  .icon-name {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
  }

  .icon-description {
    font-size: 14px;
    margin-top: 5px;
    height: 55%; /* 指定高度 */
    overflow: hidden; /* 隐藏溢出内容 */
  }

  .icon-text {
    font-size: 15px;
    transition: transform 0.3s; /* 添加过渡效果 */
  }
}
</style>
